<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="flex flex-col min-h-screen bg-dark text-white">
    <PageHeader />

    <router-view />

    <PageFooter />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

import PageFooter from "./components/PageFooter.vue";
import PageHeader from "./components/PageHeader.vue";

</script>

<style scoped>
:deep(body) {
  min-height: 1024px;
  background-color: #1a1b1e;
  color: #fff;
}

.chat-message {
  max-width: 85%;
}

:deep(input[type="text"]:focus) {
  outline: none;
}

.tab-active {
  border-bottom: 2px solid #6366f1;
  color: #6366f1;
}

:deep(.group:hover .group-hover\:opacity-100) {
  z-index: 10;
}
</style>

